<template>
	<view>
		<wrapBgImgVue
			bgImg="goods/goods_top.png"
		/>
		
		<navigationBarVue
			:bgImgType="1"
			navigationTitle="新增运费模板"
			@onTotalHeight="onTotalHeight"
		/>
		
		<view class="wrap paddingBottom"
			:style="'padding-top: calc(' + (topHeight + 10) + 'px) !important;'"
		>
			<view class="wrap-content flex column">
				<block v-for="(item, index) in list" :key="index">
					<view class="wrap-white" v-if="item.type === 'input' && item.direct === 'row'">
						<inputRowVue
							:item="item"
							v-model="dataInfo[item.key]"
						/>
					</view>
					
					
					<view class="wrap-white" v-else-if="item.type === 'group' && item.direct === 'row' && item.isShow">
						<groupRowVue
							:item="item"
							v-model="dataInfo[item.key]"
						/>
					</view>
					
					<view class="wrap-white" v-else-if="item.type === 'picker' && item.direct === 'row' && item.isShow">
						<pickerRowVue
							:item="item"
							v-model="dataInfo[item.key]"
						/>
					</view>
					
					<areaListVue
						v-else-if="item.type === 'area' && item.isShow"
						:item="item"
						:valuationType="dataInfo.valuation"
						v-model="dataInfo[item.key]"
					/>
				</block>
			</view>
		</view>
		
		<wrapFooterVue>
			<view class="wrap-footer-content flex align-center just-center">
				<view class="add" @click.stop="onSubmit">
					{{ logisticsID === "" ? "新增运费模板" : "保存"}}
				</view>
			</view>
		</wrapFooterVue>
	</view>
</template>

<script>
	import {
		addLogistics,
		GetLogisticsDetails,
	} from "@/utils/API.js";
	import navigationBarVue from "../components/navigationBar/navigationBar.vue";
	import wrapBgImgVue from "../components/navigationBar/bgImg.vue";
	import wrapFooterVue from "../components/footer/footer.vue";
	import inputRowVue from "../components/form/inputRow.vue";
	import groupRowVue from "../components/form/groupRow.vue";
	import pickerRowVue from "../components/form/pickerRow.vue";
	import areaListVue from "../components/form/areaList.vue";
	
	export default {
		components: {
			wrapBgImgVue,
			navigationBarVue,
			wrapFooterVue,
			inputRowVue,
			groupRowVue,
			pickerRowVue,
			areaListVue,
		},
		data() {
			return {
				topHeight: 0, //顶部高度
				logisticsID: "", //运费ID
				dataInfo: {
					name: "", //名称
					isdelivery: "1", //是否包邮
					valuation: "0", //计件方式
					delivery: "", //发布时间
					quList: [], //配送区域
				},
			}
		},
		computed: {
			list() {
				return [
					{
						"title": "模版名称",
						"type": "input",
						"direct": "row",
						"key": "name",
						"mode": "text",
						"place": "请输入模版名称",
						"tips": "请输入模版名称",
						"isShow": true,
					},
					{
						"title": "是否包邮",
						"type": "group",
						"direct": "row",
						"key": "isdelivery",
						"list": [
							{ "title": "自定义运费", "id": "0"},
							{ "title": "卖家包邮", "id": "1"},
						],
						"tips": "请选择是否包邮",
						"isShow": true,
					},
					{
						"title": "计价方式",
						"type": "group",
						"direct": "row",
						"key": "valuation",
						"list": [
							{ "title": "按件数", "id": "0"},
							{ "title": "按重量", "id": "1"},
						],
						"tips": "请选择计价方式",
						"isShow": this.dataInfo.isdelivery === "0",
					},
					{
						"title": "发货时间",
						"type": "picker",
						"direct": "row",
						"key": "delivery",
						"mode": "selector",
						"list": [
							{ "title": "4小时内", "id": "0" },
							{ "title": "8小时内", "id": "1" },
							{ "title": "12小时内", "id": "2" },
							{ "title": "16小时内", "id": "3" },
							{ "title": "20小时内", "id": "4" },
							{ "title": "1天内", "id": "5" },
							{ "title": "2天内", "id": "6" },
							{ "title": "3天内", "id": "7" },
							{ "title": "4天内", "id": "8" },
							{ "title": "5天内", "id": "9" },
							{ "title": "7天内", "id": "10" },
							{ "title": "8天内", "id": "11" },
							{ "title": "10天内", "id": "12" },
							{ "title": "12天内", "id": "13" },
							{ "title": "15天内", "id": "14" },
							{ "title": "17天内", "id": "15" },
							{ "title": "20天内", "id": "16" },
							{ "title": "25天内", "id": "17" },
							{ "title": "30天内", "id": "18" },
						],
						"rangeKey": "title",
						"place": "请选择发货时间",
						"tips": "请选择发货时间",
						"isArrow": true,
						"isShow": true,
					},
					{
						"type": "area",
						"key": "quList",
						"tips": "请选择配送区域",
						"isShow": this.dataInfo.isdelivery === "0",
					}
				]
			}
		},
		onLoad(options) {
			if (options.hasOwnProperty("id")) {
				this.logisticsID = options.id;
				
				this.getDetailsData();
			}
		},
		onUnload() {
			uni.$off("areaChoose");
		},
		methods: {
			/**
			 * 顶部高度
			 */
			onTotalHeight(height) {
				this.topHeight = height;
			},
			
			/**
			 * 确定
			 */
			onSubmit() {
				if (this.$filters.judgeFormData(this.list, this.dataInfo)) {
					if (this.logisticsID === "") {
						this.onAddData();
					} else {
						this.onEditData();
					}
				}
			},
			/**
			 * 添加
			 */
			onAddData() {
				this.$throttle(() => {
					var obj = {...this.dataInfo};
					addLogistics(obj).then(res => {
						this.$st.success("添加成功", () => {
							uni.navigateBack();
						})
					})
				})
			},
			/**
			 * 修改
			 */
			onEditData() {
				this.$throttle(() => {
					var obj = {...this.dataInfo};
					obj.logistics_id = this.logisticsID;
					addLogistics(obj).then(res => {
						this.$st.success("修改成功", () => {
							uni.navigateBack();
						})
					})
				})
			},
			
			/**
			 * 获取详情
			 */
			getDetailsData() {
				GetLogisticsDetails(this.logisticsID).then(res => {
					const data = res.data;
					
					Object.keys(this.dataInfo).forEach(key => {
						if (key === "quList") {
							var children = data.children;
							var list = [];
							
							for (let i = 0; i < data.children.length; i++) {
								const item = data.children[i];
								
								let obj = {
									first: item.first,
									first_fee: item.first_fee,
									additional: item.additional,
									additional_fee: item.additional_fee,
									city_id: item.citys.join(","),
									city_name: item.address_text.join(","),
								}
								list.push(obj);
							}
							
							this.dataInfo.quList = list;
						} else {
							this.dataInfo[key] = data[key];
						}
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "../components/css/form.css";
	.wrap {
		--bottom-height: 140rpx;
		padding: 33rpx;
		box-sizing: border-box;
		
		.wrap-content {
			width: 100%;
			overflow: hidden;
			gap: 20rpx;
			
			.wrap-white {
				width: 100%;
				background-color: white;
				border-radius: 20rpx;
				overflow: hidden;
				padding: 0 30rpx;
				box-sizing: border-box;
			}
		}
	}
	
	.wrap-footer-content {
		width: 100vw;
		height: 120rpx;
		overflow: hidden;
		padding: 0rpx 37rpx;
		box-sizing: border-box;
		
		.add {
			width: 100%;
			height: 82rpx;
			line-height: 82rpx;
			text-align: center;
			background: linear-gradient(to right, #84BD00, #4982EA);
			border-radius: 50rpx;
			overflow: hidden;
			color: white;
			font-size: 30rpx;
		}
	}
</style>